<script setup lang="ts">
import { ref } from 'vue'

const user = ref(JSON.parse(localStorage.getItem('user') || '{}'))

const handleLogout = () => {
    localStorage.removeItem('user')
    location.reload()
}

</script>

<template>
    <div>
        <el-container class="h-screen">
            <el-header class="!p-0 fixed w-full z-10 b-b b-slate-700 b-solid">
                <div
                    class="flex h-full justify-between items-center px-2 bg-slate-700 text-light-50"
                >
                    <div class="flex items-center">
                        <div>
                            <img
                                src="/car.svg"
                                alt=""
                                class="w-[45px] h-[45px]"
                            />
                        </div>
                        <div class="ml-2 text-6">智慧停车停车场管理系统</div>
                    </div>
                    <div class="flex-grow" />
                    <div class="flex justify-center items-center">
                        <div><el-link type="info" class="mr-4" target="blank" href="./#/park-playground">停车场模拟器</el-link></div>
                        <div class="text-5 mr-2">{{ user.name }} </div>
                        <el-button @click="handleLogout"
                       size="small"
                        type="primary"
                       >退出</el-button>
                    </div>
                </div>
            </el-header>
            <el-container class="mt-[60px]">
                <el-aside
                    width="200px"
                    class="fixed pt-[60px] top-0 bottom-0 overflow-y-auto overflow-x-hidden"
                >
                    <el-menu
                        active-text-color="#569cd6"
                        background-color="#475569"
                        class="aside w-[200px] min-h-full overscroll-auto"
                        default-active="/"
                        text-color="#fff"
                        :router="true"
                    >
                        <el-menu-item index="/user">
                            <el-icon> <User /></el-icon>
                            <span>用户管理</span>
                        </el-menu-item>
                        <el-menu-item index="/park">
                            <el-icon> <OfficeBuilding /></el-icon>
                            <span>停车场管理</span>
                        </el-menu-item>
                        <el-menu-item index="/park-space">
                            <el-icon> <Location /></el-icon>
                            <span>停车位管理</span>
                        </el-menu-item>
                        <el-menu-item index="/owner">
                            <el-icon> <Avatar /></el-icon>
                            <span>车主管理</span>
                        </el-menu-item>
                        <el-menu-item index="/car">
                            <el-icon> <Van /></el-icon>
                            <span>车辆管理</span>
                        </el-menu-item>
                        <el-menu-item index="/park-record">
                            <el-icon> <Notebook /></el-icon>
                            <span>停车记录管理</span>
                        </el-menu-item>
                        <el-menu-item index="/pay-record">
                            <el-icon> <Tickets /></el-icon>
                            <span>订单管理</span>
                        </el-menu-item>
                        <el-menu-item index="/package">
                            <el-icon> <Handbag /></el-icon>
                            <span>套餐管理</span>
                        </el-menu-item>
                        <el-menu-item index="/price-mode">
                            <el-icon> <Money /></el-icon>
                            <span>自由车位计费模式</span>
                        </el-menu-item>
                        <el-menu-item index="/pay-method">
                            <el-icon> <CreditCard /></el-icon>
                            <span>支付方式管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main class="ml-[200px]">
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style scoped></style>
